<script setup lang="ts">
import {useRoute} from 'vue-router'
import {router} from "@/router";
import headerImg from '../userReset/imge/letterbg.png'
import activationImg from '../userReset/imge/activation-success.png'
import {checkResetPasswordById} from "@/pages/account/accountApi.js";
import {ElMessage} from "element-plus";
const userId = useRoute().query.userId;
const adminId = useRoute().query.adminId;
const isClick = ref(false)
const dialogVisible=ref(true)
const isReset = async (id)=>{
  await checkResetPasswordById(id).then(async res => {
    if (res.data==1){
      ElMessage.warning("你已同意重置密码，请勿重复提交！")
      isClick.value = true
      return;
    }
  })
}
  const handleConfirm = async (data) => {
    ws.value.send(JSON.stringify({isReset: data, userId: userId, adminId: adminId})); // 发送消息
    isClick.value = true
    dialogVisible.value = true
  }
  const dialogSubmit = () => {
    ElMessage.warning("即将跳转到登录页")
    setTimeout(() => {
      router.push('/login')
    },1500)
    dialogVisible.value = false
  }
const ws = ref(null)
const ljie = () => {
  if (ws.value && ws.value.readyState === WebSocket.OPEN) {
    return;
  }
  ws.value = new WebSocket(`ws://localhost:8082/userReset/${userId}`);
  ws.value.onopen = (event) => {

  };
  ws.value.onerror = (error) => {

  };
  ws.value.onclose = (event) => {

  };
  ws.value.onmessage = (event) => {
    try {
      const message = JSON.parse(event.data);
    } catch (error) {

    }
  };
}
onMounted(() => {
  ljie();
  isReset(userId);
})
</script>

<template>
  <div style="display: flex; justify-content: center;align-items: center;margin-top: 5%">
    <el-card v-if="!isClick" style="width: 90%; height: 50vh;" :body-style="{ padding: '0px' }">
      <h1 style="text-align: center;margin-top: 5%">欢迎使用大学生创新创业管理系统</h1>
      <h3 style="text-align: center;margin-top: 50px"> 是否同意管理重置您的密码？</h3>
      <div style="text-align: center; margin-top: 50px">
        <el-button v-if="!isClick" type="success" style="margin-top: 20px" :disabled="isClick" @click="handleConfirm(1)">同意</el-button>
        <el-button v-if="!isClick" type="primary" style="margin-top: 20px; margin-left: 20px" :disabled="isClick" @click="handleConfirm(0)">取消</el-button>
        <el-button v-if="isClick" text type="success" style="margin-top: 20px; margin-left: 20px" @click="router.push('/login')">前往登录</el-button>
      </div>
    </el-card>
    <el-card v-else style="width: 80%; height: 50vh;" :body-style="{ padding: '0px' }">
    <img :src="headerImg" style="width: 100%; height: 100%; object-fit: cover;"/>
    <el-divider direction="horizontal" style="width: 94%;margin-left: 3%;margin-top: 50px; margin-bottom: 20px" />
    <img :src="activationImg" style="width: 12%; height: 12%; object-fit: cover; margin-left: 44%" />
    <h3 style="text-align: center;margin-top: 30px"> 已提交</h3>
      <div style="text-align: center; margin-top: 20px">
        <p style="color: #999">若不能直接点击登录，可以复制以下链接到浏览器。</p>
        <p>http://localhost:3333/#/login</p>
      </div>
    <div style="text-align: center; margin-top: 20px">
      <el-button type="primary" style="width: 180px;margin-top: 20px; margin-left: 20px" @click="router.push('/login')">前往登录</el-button>
    </div>
  </el-card>
    <el-dialog v-model="dialogVisible" title="提示" width="500" center>
    <span style="display: flex;justify-content: center;text-align: center;align-items: center">
      是否跳转登录？
    </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="dialogVisible = false">取消</el-button>
          <el-button size="small" type="primary" @click="dialogSubmit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>
